﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模切材料小管家</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            /* TDesign 工业品色彩系统 */
            --primary-color: #0052d9;
            --primary-light: #266fe8;
            --primary-dark: #003cab;
            --secondary-color: #f2f3ff;
            --accent-color: #e37318;
            --success-color: #00a870;
            --warning-color: #ed7b2f;
            --error-color: #d54941;
            
            /* 背景色系 */
            --bg-color-page: #f5f7fa;
            --bg-color-container: #ffffff;
            --bg-color-secondray: #f8f9fc;
            
            /* 边框和分割线 */
            --border-color: #e7e7e7;
            --border-color-light: #f0f0f0;
            --border-radius-small: 3px;
            --border-radius-medium: 6px;
            --border-radius-large: 9px;
            
            /* 文字色彩 */
            --text-primary: #1a1a1a;
            --text-secondary: #4e5969;
            --text-placeholder: #86909c;
            --text-disabled: #c9cdd4;
            
            /* 阴影系统 */
            --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-2: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
            --shadow-3: 0 4px 8px 0 rgba(0, 0, 0, 0.12);
            
            /* 间距系统 */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --space-10: 40px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: var(--bg-color-page);
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.5;
            padding-bottom: 64px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .container {
            max-width: 480px;
            margin: 0 auto;
            background: var(--bg-color-container);
            min-height: 100vh;
            box-shadow: var(--shadow-1);
            position: relative;
            overflow-x: hidden;
        }
        
        /* 头部样式 - TDesign 简约风格 */
        .header {
            background: var(--primary-color);
            color: white;
            padding: var(--space-4) var(--space-4) var(--space-5);
            position: relative;
            z-index: 10;
        }
        
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-4);
        }
        
        .logo {
            font-weight: 500;
            font-size: 16px;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: var(--space-2);
            font-size: 18px;
        }
        
        .actions {
            display: flex;
            gap: var(--space-5);
        }
        
        .actions i {
            font-size: 16px;
            cursor: pointer;
            opacity: 0.9;
            transition: opacity 0.2s ease;
        }
        
        .actions i:hover {
            opacity: 1;
        }
        
        .search-box {
            background: rgba(255,255,255,0.15);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: var(--border-radius-medium);
            padding: var(--space-2) var(--space-3);
            display: flex;
            align-items: center;
            transition: all 0.2s ease;
        }
        
        .search-box:focus-within {
            background: rgba(255,255,255,0.25);
            border-color: rgba(255,255,255,0.4);
        }
        
        .search-box i {
            margin-right: var(--space-2);
            color: rgba(255,255,255,0.7);
            font-size: 14px;
        }
        
        .search-box input {
            background: transparent;
            border: none;
            color: white;
            width: 100%;
            font-size: 14px;
            outline: none;
        }
        
        .search-box input::placeholder {
            color: rgba(255,255,255,0.6);
        }
        
        /* Banner 轮播图 - 更加紧凑简约 */
        .banner {
            margin: var(--space-4) 0; /* 去除左右留白 */
            border-radius: var(--border-radius-medium);
            overflow: hidden;
            box-shadow: var(--shadow-2);
            height: 120px;
            position: relative;
        }
        
        .screen {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .banner-indicators {
            position: absolute;
            bottom: var(--space-2);
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: var(--space-1);
        }
        
        .banner-indicator {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(255,255,255,0.4);
            transition: all 0.2s ease;
        }
        
        .banner-indicator.active {
            background: white;
            transform: scale(1.2);
        }
        
        /* 快捷入口 - TDesign 工业简约风格 */
        .quick-access {
            padding: 0 var(--space-4);
            margin-bottom: var(--space-5);
        }
        
        .quick-access-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-3);
            margin-bottom: var(--space-4);
        }
        
        .quick-access-row:last-child {
            margin-bottom: 0;
        }
        
        .quick-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: var(--bg-color-container);
            border-radius: var(--border-radius-medium);
            border: 1px solid var(--border-color);
            transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
            position: relative;
            cursor: pointer;
        }
        
        .quick-item:hover {
            border-color: var(--primary-color);
            box-shadow: var(--shadow-2);
        }
        
        .quick-item-uniform {
            padding: var(--space-4) var(--space-2);
            min-height: 72px;
        }
        
        .quick-item-uniform::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary-color);
            border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
        }
        
        .quick-item i {
            margin-bottom: var(--space-2);
            position: relative;
            z-index: 2;
        }
        
        .quick-item-uniform i {
            font-size: 24px;
        }
        
        .quick-item-bulk i { 
            color: var(--error-color);
        }
        
        .quick-item-group i { 
            color: var(--success-color);
        }
        
        .quick-item-material i { 
            color: var(--accent-color);
        }
        
        .quick-item-process i { 
            color: var(--primary-light);
        }
        
        .quick-item-params i { 
            color: #8b5cf6;
        }
        
        .quick-item-news i { 
            color: #f59e0b;
        }
        
        .quick-item span {
            color: var(--text-primary);
            font-weight: 500;
            position: relative;
            z-index: 2;
        }
        
        .quick-item-uniform span {
            font-size: 13px;
        }
        
        /* 功能区域 - TDesign 简约风格 */
        .section {
            background: var(--bg-color-container);
            margin: var(--space-4);
            border-radius: var(--border-radius-medium);
            border: 1px solid var(--border-color-light);
            overflow: hidden;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-3) var(--space-4);
            border-bottom: 1px solid var(--border-color-light);
            background: var(--bg-color-secondray);
        }
        
        .section-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: var(--space-2);
            color: var(--primary-color);
            font-size: 14px;
        }
        
        .section-more {
            color: var(--text-placeholder);
            font-size: 12px;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .section-more:hover {
            color: var(--primary-color);
        }
        
        .section-content {
            padding: var(--space-4);
        }
        
        /* 限时会员提示 */
        .tip-container {
            margin: var(--space-4);
            padding: var(--space-4);
            background: #fff7e6;
            border-radius: var(--border-radius-medium);
            border: 1px solid #ffd591;
        }
        
        .tip-header {
            display: flex;
            align-items: center;
            margin-bottom: var(--space-3);
        }
        
        .tip-header i {
            font-size: 16px;
            color: var(--primary-color);
            margin-right: var(--space-2);
        }
        
        .tip-header h3 {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .tip-content {
            display: flex;
            justify-content: space-between;
            gap: var(--space-3);
        }
        
        .tip-item {
            flex: 1;
            text-align: center;
            padding: var(--space-3);
            border-radius: var(--border-radius-small);
            background: var(--bg-color-container);
            border: 1px solid var(--border-color-light);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .tip-item:hover {
            border-color: var(--primary-color);
            box-shadow: var(--shadow-1);
        }
        
        .tip-item i { font-size: 18px; color: var(--success-color); margin-bottom: var(--space-2); }
        .member-cta{ display:flex; gap:12px; margin-top:12px; }
        .btn-member{ flex:1; border:none; border-radius:6px; padding:10px 12px; background:var(--success-color); color:#fff; font-size:14px; cursor:pointer; }
        .member-note{ font-size:12px; color:#d46b08; margin-top:8px; }
        .benefits-intro{ color: var(--text-secondary); font-size:13px; line-height:1.6; margin-bottom:8px; }
        .benefits-list{ list-style:none; display:flex; flex-direction:column; gap:8px; padding:0; }
        .benefits-list li{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border-color-light); border-radius:6px; padding:10px 12px; }
        .benefits-list i{ color: var(--primary-color); font-size:14px; }
        .old-price{ text-decoration: line-through; color:#86909c; margin-left:8px; font-size:12px; }
        .original-price{ font-size:12px; color: var(--text-secondary); margin-top:6px; }
        
        .tip-item span {
            font-size: 12px;
            color: var(--text-primary);
            white-space: nowrap;
            display: block;
        }
        
        /* 供应产品 - TDesign 简约风格 */
        .products {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }
        
        .product-item {
            display: flex;
            gap: var(--space-3);
            padding: var(--space-3);
            border-radius: var(--border-radius-small);
            transition: all 0.2s ease;
            cursor: pointer;
            border: 1px solid transparent;
        }
        
        .product-item:hover {
            background: var(--bg-color-secondray);
            border-color: var(--border-color);
        }
        
        .product-item:not(:last-child) {
            border-bottom: 1px solid var(--border-color-light);
        }
        
        .product-img {
            width: 80px;
            height: 80px;
            background: var(--bg-color-secondray);
            border-radius: var(--border-radius-small);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-placeholder);
            font-size: 12px;
            border: 1px solid var(--border-color-light);
        }
        
        .product-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .product-title {
            font-weight: 500;
            margin-bottom: var(--space-1);
            font-size: 14px;
            color: var(--text-primary);
        }
        
        .product-desc {
            color: var(--text-secondary);
            font-size: 12px;
            margin-bottom: var(--space-2);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 1.4;
        }
        
        .product-meta {
            display: flex;
            justify-content: space-between;
            color: var(--text-placeholder);
            font-size: 11px;
        }
        
        .product-price {
            color: var(--accent-color);
            font-weight: 500;
        }
        
        /* 求购列表 - 与demand-list保持一致 */
        .demands {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }
        
        .demand-item {
            background: var(--bg-color-container);
            border-radius: var(--border-radius-medium);
            padding: var(--space-4);
            box-shadow: var(--shadow-1);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
            border: 1px solid var(--border-color-light);
            position: relative;
            overflow: hidden;
        }
        
        /* 左侧橙色装饰条 - 与demand-list一致 */
        .demand-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: var(--warning-color); /* 橙色，对应求购主题色 */
            border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
        }
        
        .demand-item:hover {
            border-color: var(--primary-color);
            box-shadow: var(--shadow-2);
        }
        
        .demand-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: var(--space-2);
        }
        
        .demand-title {
            font-weight: 500;
            font-size: 14px;
            color: var(--text-primary);
            flex: 1;
            margin-right: var(--space-2);
        }
        
        .demand-status {
            color: white;
            font-size: 10px;
            padding: var(--space-1) var(--space-2);
            border-radius: var(--border-radius-small);
            flex-shrink: 0;
        }
        
        /* 材料状态样式 - 对应首页找材料橙色 */
        .demand-status.material {
            background: var(--accent-color);
        }
        
        /* 加工状态样式 - 对应首页找加工蓝色 */
        .demand-status.processing {
            background: var(--primary-light);
        }
        
        .demand-content {
            color: var(--text-secondary);
            font-size: 12px;
            margin-bottom: var(--space-2);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.4;
        }
        
        .demand-meta {
            display: flex;
            justify-content: space-between;
            color: var(--text-placeholder);
            font-size: 11px;
        }
        
        .demand-company {
            display: flex;
            align-items: center;
        }
        
        .demand-company i {
            margin-right: var(--space-1);
            color: var(--primary-color);
            font-size: 10px;
        }
        
        /* 新增求购信息样式 */
        .demand-info {
            margin-top: var(--space-3);
        }
        
        .info-row {
            display: flex;
            margin-bottom: var(--space-2);
            font-size: 12px;
            line-height: 1.4;
        }
        
        .info-label {
            color: var(--text-placeholder);
            min-width: 80px;
            flex-shrink: 0;
        }
        
        .info-value {
            color: var(--text-secondary);
            flex: 1;
        }
        
        /* 需求地点和发布时间合并行样式 */
        .location-date-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: var(--space-2);
            padding: var(--space-2) var(--space-3);
            background-color: #f8f9fc;
            border-radius: var(--border-radius-small);
            border: none;
        }
        
        .location-date-row .info-value {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        /* 拼单列表样式 */
        .group-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }
        
        .group-item {
            background: var(--bg-color-container);
            border-radius: var(--border-radius-medium);
            padding: var(--space-4);
            box-shadow: var(--shadow-1);
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
            border: 1px solid var(--border-color-light);
            position: relative;
            overflow: hidden;
        }
        
        .group-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: var(--success-color);
            border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
        }
        
        .group-item:hover {
            border-color: var(--primary-color);
            box-shadow: var(--shadow-2);
        }
        
        .group-model {
            color: var(--primary-color);
            font-weight: 600;
            font-size: 16px;
            margin-bottom: var(--space-2);
        }
        
        .group-category {
            color: var(--text-secondary);
            font-size: 12px;
            margin-bottom: var(--space-2);
        }
        
        .group-name {
            color: var(--text-secondary);
            font-size: 12px;
            margin-bottom: var(--space-2);
            font-weight: normal;
        }
        
        .group-info {
            margin-top: var(--space-3);
        }
        
        .participants-section {
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        
        .participants-avatars {
            display: flex;
            align-items: center;
        }
        
        .participant-avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid var(--bg-color-container);
            background: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 10px;
            font-weight: 500;
            margin-left: -6px;
            position: relative;
            z-index: 1;
        }
        
        .participant-avatar:nth-child(1) {
            margin-left: 0;
            background: var(--success-color);
        }
        
        .participant-avatar:nth-child(2) {
            background: var(--accent-color);
        }
        
        .participant-avatar:nth-child(3) {
            background: var(--primary-light);
        }
        
        .participant-avatar:nth-child(4) {
            background: var(--warning-color);
        }
        
        .participant-avatar:nth-child(5) {
            background: var(--error-color);
        }
        
        .participants-text {
            color: var(--text-placeholder);
            font-size: 11px;
            margin-left: var(--space-1);
        }
        
        /* 广告弹窗样式 - 真正的广告位风格 */
        .ad-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .ad-modal.show {
            opacity: 1;
            visibility: visible;
        }
        
        .ad-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            cursor: pointer;
        }
        
        .ad-banner {
            position: relative;
            max-width: 90%;
            width: 350px;
            background: var(--bg-color-container);
            border-radius: var(--border-radius-large);
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            transform: scale(0.8) rotate(-2deg);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            animation: adFloat 3s ease-in-out infinite alternate;
        }
        
        .ad-modal.show .ad-banner {
            transform: scale(1) rotate(0deg);
        }
        
        .ad-close-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 32px;
            height: 32px;
            background: rgba(0, 0, 0, 0.6);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 14px;
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            backdrop-filter: blur(4px);
        }
        
        .ad-close-btn:hover {
            background: rgba(0, 0, 0, 0.8);
            transform: scale(1.1);
        }
        
        .ad-image-container {
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .ad-image {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.3s ease;
        }
        
        .ad-image-container:hover .ad-image {
            transform: scale(1.05);
        }
        
        .ad-image-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
            pointer-events: none;
        }
        
        .ad-image-container:hover::before {
            transform: translateX(100%);
        }
        
        @keyframes adFloat {
            0% {
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            }
            100% {
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
                transform: scale(1) rotate(0deg) translateY(-2px);
            }
        }
        
        /* 响应式适配 */
        @media (max-width: 400px) {
            .ad-banner {
                width: 320px;
                max-width: 85%;
            }
        }

        /* 底部导航 - TDesign 简约风格 */
        .tabbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-color-container);
            display: flex;
            border-top: 1px solid var(--border-color);
            z-index: 100;
            max-width: 480px;
            margin: 0 auto;
            height: 64px;
        }
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: var(--space-2) 0;
            color: var(--text-placeholder);
            font-size: 10px;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .tab-item.active {
            color: var(--primary-color);
        }
        
        .tab-item:hover {
            color: var(--primary-light);
        }
        
        .tab-item i {
            font-size: 18px;
            margin-bottom: var(--space-1);
        }
        
        .badge {
            background: var(--accent-color);
            color: white;
            font-size: 10px;
            padding: 1px var(--space-1);
            border-radius: var(--border-radius-small);
            margin-left: var(--space-1);
            vertical-align: middle;
            min-width: 16px;
            height: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部区域 -->
        <div class="header">
            <div class="top-bar">
                <div class="logo">
                    <i class="fas fa-industry"></i>
                    <span>模切材料小管家</span>
                </div>
                <div class="actions">
                    <i class="fas fa-bell"></i>
                    <i class="fas fa-user"></i>
                </div>
            </div>
            
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="搜类别，名称，型号，公司主营业务">
            </div>
        </div>
        
        <!-- Banner轮播图 -->
        <div class="banner">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='150' viewBox='0 0 400 150'%3E%3Crect fill='%232b6de5' width='400' height='150'/%3E%3Ctext fill='%23ffffff' font-family='Arial' font-size='18' x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle'%3E广告Banner区域%3C/text%3E%3C/svg%3E" alt="Banner">
            <div class="banner-indicators">
                <div class="banner-indicator active"></div>
                <div class="banner-indicator"></div>
                <div class="banner-indicator"></div>
            </div>
        </div>
        
        <!-- 快捷入口 - 6个功能按钮重新布局 -->
        <div class="quick-access">
            <!-- 第一行：找散料、来拼单、看资讯 -->
            <div class="quick-access-row">
                <div class="quick-item quick-item-uniform quick-item-bulk" onclick="location.href='bulk-materials.html'">
                    <i class="fas fa-box-open"></i>
                    <span>找散料</span>
                </div>
                <div class="quick-item quick-item-uniform quick-item-group" onclick="location.href='group-orders.html'">
                    <i class="fas fa-layer-group"></i>
                    <span>来拼单</span>
                </div>
                <div class="quick-item quick-item-uniform quick-item-news" onclick="location.href='industry-news.html'">
                    <i class="fas fa-newspaper"></i>
                    <span>看资讯</span>
                </div>
            </div>
            
            <!-- 第二行：找材料商、找加工商、找参数 -->
            <div class="quick-access-row">
                <div class="quick-item quick-item-uniform quick-item-material" onclick="location.href='bulk-materials-category.html'">
                    <i class="fas fa-cube"></i>
                    <span>找材料商</span>
                </div>
                <div class="quick-item quick-item-uniform quick-item-process" onclick="location.href='bulk-processing-category.html'">
                    <i class="fas fa-cogs"></i>
                    <span>找加工商</span>
                </div>
                <div class="quick-item quick-item-uniform quick-item-params" onclick="location.href='search-results.html'">
                    <i class="fas fa-file-alt"></i>
                    <span>找参数</span>
                </div>
            </div>
        </div>
        
        
        
        <!-- 最新求购 -->
        <div class="section">
            <div class="section-header">
                <div class="section-title">
                    <i class="fas fa-tag"></i>
                    <span>最新求购</span>
                    <span class="badge">新</span>
                </div>
                <div class="section-more">查看更多</div>
            </div>
            <div class="section-content">
                <div class="demands">
                    <div class="demand-item">
                        <div class="demand-header">
                            <div class="demand-title">TAPE-001</div>
                            <div class="demand-status material">材料</div>
                        </div>
                        <div class="demand-info">
                            <div class="info-row">
                                <span class="info-label">产品分类:</span>
                                <span class="info-value">胶带类</span>
                            </div>
                            <div class="info-row">
                                <span class="info-label">产品名称:</span>
                                <span class="info-value">单面胶带</span>
                            </div>
                            <div class="info-row">
                                <span class="info-label">技术参数:</span>
                                <span class="info-value">宽度50mm，厚度0.15mm，耐高温</span>
                            </div>
                            <div class="info-row">
                                <span class="info-label">要求:</span>
                                <span class="info-value">耐高温材料，粘性强，符合工业标准</span>
                            </div>
                            <div class="info-row location-date-row">
                                <i class="fas fa-map-marker-alt" style="color: #86909c; margin-right: 4px;"></i>
                                <span class="info-value">浙江杭州</span>
                                <span class="info-value" style="margin-left: auto;">2024-01-15</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="demand-item">
                        <div class="demand-header">
                            <div class="demand-title">OCA-001</div>
                            <div class="demand-status processing">加工</div>
                        </div>
                        <div class="demand-info">
                            <div class="info-row">
                                <span class="info-label">产品分类:</span>
                                <span class="info-value">光学材料</span>
                            </div>
                            <div class="info-row">
                                <span class="info-label">产品名称:</span>
                                <span class="info-value">OCA光学胶加工</span>
                            </div>
                            <div class="info-row">
                                <span class="info-label">加工要求:</span>
                                <span class="info-value">透光率92%以上，无气泡，符合光学标准</span>
                            </div>
                            <div class="info-row location-date-row">
                                <i class="fas fa-map-marker-alt" style="color: #86909c; margin-right: 4px;"></i>
                                <span class="info-value">江苏苏州</span>
                                <span class="info-value" style="margin-left: auto;">2024-01-14</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 最新拼单 -->
        <div class="section">
            <div class="section-header">
                <div class="section-title">
                    <i class="fas fa-layer-group"></i>
                    <span>最新拼单</span>
                </div>
                <div class="section-more">查看更多</div>
            </div>
            <div class="section-content">
                <div class="group-list">
                    <div class="group-item">
                        <div class="group-model">TAPE-001</div>
                        <div class="group-category">产品分类：胶带类</div>
                        <div class="group-name">产品名称：单面胶带</div>
                        <div class="group-info">
                            <div class="info-row">
                                <span class="info-label">规格数量:</span>
                                <span class="info-value">500卷</span>
                            </div>
                            <div class="info-row">
                                <span class="info-label">总量:</span>
                                <span class="info-value">500卷</span>
                            </div>
                            <div class="info-row">
                                <span class="info-label">已参与:</span>
                                <div class="participants-section">
                                    <div class="participants-avatars">
                                        <div class="participant-avatar">陈</div>
                                        <div class="participant-avatar">刘</div>
                                        <div class="participant-avatar">杨</div>
                                        <div class="participant-avatar">+</div>
                                    </div>
                                    <span class="participants-text">8人参与</span>
                                </div>
                            </div>
                            <div class="info-row location-date-row">
                                <i class="fas fa-map-marker-alt" style="color: #86909c; margin-right: 4px;"></i>
                                <span class="info-value">广东深圳</span>
                                <span class="info-value" style="margin-left: auto;">2024-01-14</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group-item">
                        <div class="group-model">OCA-001</div>
                        <div class="group-category">产品分类：光学材料</div>
                        <div class="group-name">产品名称：OCA光学胶</div>
                        <div class="group-info">
                            <div class="info-row">
                                <span class="info-label">规格数量:</span>
                                <span class="info-value">2000平方米</span>
                            </div>
                            <div class="info-row">
                                <span class="info-label">总量:</span>
                                <span class="info-value">2000平方米</span>
                            </div>
                            <div class="info-row">
                                <span class="info-label">已参与:</span>
                                <div class="participants-section">
                                    <div class="participants-avatars">
                                        <div class="participant-avatar">张</div>
                                        <div class="participant-avatar">李</div>
                                        <div class="participant-avatar">王</div>
                                        <div class="participant-avatar">赵</div>
                                        <div class="participant-avatar">+</div>
                                    </div>
                                    <span class="participants-text">15人参与</span>
                                </div>
                            </div>
                            <div class="info-row location-date-row">
                                <i class="fas fa-map-marker-alt" style="color: #86909c; margin-right: 4px;"></i>
                                <span class="info-value">浙江杭州</span>
                                <span class="info-value" style="margin-left: auto;">2024-01-15</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 付费会员（移动至页面底部） -->
        <div class="tip-container">
            <div class="tip-header">
                <i class="fas fa-crown" style="color:#faad14"></i>
                <h3>付费会员</h3>
            </div>
            <p class="benefits-intro">注册付费会员，享阅览自由+发布自由+定制服务</p>
            <div class="member-cta">
                <button class="btn-member" onclick="location.href='membership-register.html'">早鸟价 ¥365/年 立即开通</button>
            </div>
        </div>

        <!-- 底部导航（统一：首页、求购、发布、咨询、我的） -->
        <div class="tabbar">
            <div class="tab-item active" onclick="location.href='home.html'">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item" onclick="location.href='demand-list.html'">
                <i class="fas fa-search"></i>
                <span>求购</span>
            </div>
            <div class="tab-item" onclick="location.href='publish-select.html'">
                <i class="fas fa-plus-circle"></i>
                <span>发布</span>
            </div>
            <div class="tab-item" onclick="location.href='consultation.html'">
                <i class="fas fa-comments"></i>
                <span>客服</span>
            </div>
            <div class="tab-item" onclick="location.href='profile.html'">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
        
        <!-- 广告弹窗 -->
        <div class="ad-modal" id="adModal">
            <div class="ad-overlay" onclick="closeAdModal()"></div>
            <div class="ad-banner">
                <button class="ad-close-btn" onclick="closeAdModal()">
                    <i class="fas fa-times"></i>
                </button>
                <div class="ad-image-container" onclick="goToMembership()">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%230052d9'/%3E%3Cstop offset='100%25' style='stop-color:%23266fe8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='300' fill='url(%23bg)'/%3E%3Ctext x='200' y='120' text-anchor='middle' fill='white' font-size='28' font-weight='bold'%3E模切材料小管家%3C/text%3E%3Ctext x='200' y='160' text-anchor='middle' fill='white' font-size='18'%3E早鸟价 ¥365/年%3C/text%3E%3Ctext x='200' y='190' text-anchor='middle' fill='%23ffd700' font-size='16'%3E限时特惠 立即开通%3C/text%3E%3Ccircle cx='80' cy='80' r='20' fill='%23ff6b6b' opacity='0.8'/%3E%3Ccircle cx='320' cy='220' r='15' fill='%23ffd700' opacity='0.6'/%3E%3Cpath d='M50 250 Q200 200 350 250' stroke='white' stroke-width='2' fill='none' opacity='0.3'/%3E%3C/svg%3E" alt="会员广告" class="ad-image">
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 模拟轮播图切换
        setInterval(() => {
            const indicators = document.querySelectorAll('.banner-indicator');
            let activeIndex = 0;
            
            indicators.forEach((indicator, index) => {
                if(indicator.classList.contains('active')) {
                    activeIndex = index;
                    indicator.classList.remove('active');
                }
            });
            
            activeIndex = (activeIndex + 1) % indicators.length;
            indicators[activeIndex].classList.add('active');
        }, 3000);
        
        // 搜索框交互优化
        const searchInput = document.querySelector('.search-box input');
        searchInput.addEventListener('focus', () => {
            searchInput.parentElement.style.background = 'rgba(255,255,255,0.25)';
        });
        
        searchInput.addEventListener('blur', () => {
            searchInput.parentElement.style.background = 'rgba(255,255,255,0.15)';
        });
        
        // 底部导航切换
        document.querySelectorAll('.tab-item').forEach((item, index) => {
            item.addEventListener('click', function() {
                // 移除所有active状态
                document.querySelectorAll('.tab-item').forEach(t => {
                    t.classList.remove('active');
                });
                
                // 添加active状态
                this.classList.add('active');
            });
        });
        
        // 广告弹窗功能
        function showAdModal() {
            const modal = document.getElementById('adModal');
            modal.classList.add('show');
        }
        
        function closeAdModal() {
            const modal = document.getElementById('adModal');
            modal.classList.remove('show');
            // 记录用户已关闭广告，避免重复显示
            localStorage.setItem('adClosed', 'true');
        }
        
        function goToMembership() {
            closeAdModal();
            location.href = 'membership-register.html';
        }
        
        // 页面加载时显示广告弹窗
        window.addEventListener('load', function() {
            // 检查用户是否已经关闭过广告
            const adClosed = localStorage.getItem('adClosed');
            if (!adClosed) {
                // 延迟1秒显示广告，让页面完全加载
                setTimeout(showAdModal, 1000);
            }
        });
    </script>
</body>
</html>
